·/**
 * 全部教室菜单
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/manageClass/allRoomsInfo' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>全部教室</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选,批量导入 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small"  v-model="formInline.classroomName" placeholder="请输入教室名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
      <el-form-item label="">
         <el-upload  ref="upload" class="upload-demo" action="http://127.0.0.1/EXAM/RoomInfoUpload/" :headers = "Myheaders" :on-success="handleSuccess" :auto-upload="false">
           <el-button slot="trigger" size="small" type="primary" icon="el-icon-s-order">上传教室</el-button>
           <el-button size="small" type="success" @click="submitUpload" icon="el-icon-upload">上传至服务器</el-button>
         </el-upload>
         <el-button  size="small" type="danger" icon="el-icon-warning" @click="deleteAllRoom()">删除所有教室</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" sortable prop="rid" label="教室编号" width="150">
      </el-table-column>
      <el-table-column align="center" prop="rName" label="教室名称" width="150">
      </el-table-column>
      <el-table-column align="center" sortable prop="rCapacity" label="可容纳人数" width="150">
      </el-table-column>
       <el-table-column align="center" prop="rLocName" label="教室地点" width="250">
      </el-table-column>
       <el-table-column align="center" sortable prop="rStatus" label="教室状态" width="150">
       <template slot-scope="scope">
          <el-switch v-model = "scope.row.rStatus" active-color="#13ce66" inactive-color="#909399" @change="editType(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button  size="small" type="danger" @click="deleteOneRoom(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="102px" :model="editForm" ref="editForm">
        <el-form-item label="教室名称" prop="rName">
          <el-input size="small" v-model="editForm.rName" auto-complete="off" placeholder="请输入教室名称"></el-input>
        </el-form-item>
        <el-form-item label="容纳人数" prop="rCapacity">
          <el-input size="small" v-model="editForm.rCapacity" auto-complete="off" placeholder="请输入可容纳人数"></el-input>
        </el-form-item>
         <el-form-item label="教室地点" prop="rLocName">
          <el-input size="small" v-model="editForm.rLocName" auto-complete="off" placeholder="请输入教室地点"></el-input>
        </el-form-item>
        <el-form-item label="教室状态" prop="rStatus">
          <el-select v-model="editForm.rStatus" placeholder="请选择教室状态">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
           </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllClassInfo, addClassInfo, updateRoomInfo, deleteAllRoom, deleteOneRoom } from '../../api/userOpe'
import Pagination from '../../components/Pagination'
export default {
  data () {
    return {
      loading: true, // 是显示加载
      editFormVisible: false, // 控制编辑页面显示与隐藏
      title: '添加',

      // 添加 ,编辑, 状态 操作表单数据
      editForm: {
        rid: '',
        rName: '',
        rCapacity: '',
        rLocName: '',
        rStatus: ''
      },

      // exxel 提交携带 token
      Myheaders: {
        USERTOKEN: sessionStorage.getItem('token')
      },
      // 教室状态选择器数据
      options: [{
        value: '0',
        label: '不可用'
      }, {
        value: '1',
        label: '可用'
      }],
      // 表单动态数据存储
      formInline: {
        page: 1,
        limit: 15,
        classroomName: ''
      },

      rightData: [], // 教室所有数据
      listData: [], // 当前显示的数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 15,
        total: 0
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created () {
    this.getData()
  },

  methods: {
    // 获取全部教室
    getData () {
      getAllClassInfo().then(res => {
        this.loading = false
        if (res.code === 20000) {
          this.$message.success('获取所有教室信息成功！')
          this.rightData = res.data.roomInfoList
          // 把rStatus 改成 true和 false
          this.rightData.forEach(item => {
            item.rStatus === 1 ? item.rStatus = true : item.rStatus = false
          })
          // console.log(this.rightData)
          this.cutData()
          // console.log(this.listData)
          // console.log(res.data)
          this.pageparm.total = this.rightData.length
        }
        // console.log(res.data.roomInfoList)
      }).catch((e) => {
        this.loading = false
        this.$message.error('教室信息加载失败，请稍后再试！')
      })
    },
    // 数据切割 分页
    cutData () {
      this.listData = this.rightData.slice((this.formInline.page - 1) * this.formInline.limit, (this.formInline.page * this.formInline.limit))
    },
    // 分页插件事件
    callFather (parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.cutData()
    },
    // 搜索事件 巧妙使用过滤器 filter
    search () {
      if (this.formInline.classroomName.trim() !== '') { // trim 去首尾空格
        this.listData = this.rightData.filter((item) => {
          return this.formInline.classroomName.trim() === item.rName
        })
      } else {
        this.getData()
      }
    },
    // 删除单个教室
    deleteOneRoom (index, row) {
      console.log(row)
      deleteOneRoom(row.rid).then(res => {
        this.$message.success('删除成功!')
        this.getData()
      }).catch(() => {
        this.$message.error('删除失败!')
      })
    },
    // 删除所有教室
    deleteAllRoom () {
      this.$confirm('您是否决定删除所有教室？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAllRoom().then(res => {
          this.$message.success('删除成功!')
          this.getData()
        }).catch(() => {
          this.$message.error('删除失败!')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // switch 按钮切换触发事件
    editType (index, row) {
      this.editForm.rid = row.rid
      this.editForm.rName = row.rName
      this.editForm.rCapacity = row.rCapacity
      this.editForm.rLocName = row.rLocName
      this.editForm.rStatus = row.rStatus === true ? 1 : 0 // 转换
      updateRoomInfo(this.editForm).then(res => {
        console.log(res)
        if (res.message === 'OK') this.$message.success('教室状态更新成功')
        else {
          this.$message.error('教室状态更新失败')
          row.rStatus = !row.rStatus
        }
        this.getData()
      }).catch((e) => {
        this.$alert('教室状态更新失败', '提示', {
          confirmButtonText: '确定'
        })
        row.rStatus = !row.rStatus
      })
    },
    // 显示编辑界面 以及预处理
    handleEdit: function (index, row) {
      this.editFormVisible = true
      if (row !== undefined && row !== 'undefined') {
        this.title = '修改'
        this.editForm.rid = row.rid
        this.editForm.rName = row.rName
        this.editForm.rCapacity = row.rCapacity
        this.editForm.rLocName = row.rLocName
        this.editForm.rStatus = row.rStatus === true ? '可用' : '不可用' // 转换
      } else {
        this.title = '添加'
        this.editForm.rName = ''
        this.editForm.rCapacity = ''
        this.editForm.rLocName = ''
        this.editForm.rStatus = ''
      }
    },

    // 添加 编辑页面方法
    submitForm (editDate) {
      this.$refs[editDate].validate(valid => { // 表单预检验
        if (valid) {
          this.loading = true
          if (this.title === '添加') {
            // 添加操作
            addClassInfo(this.editForm).then(res => {
              this.editFormVisible = false
              // console.log(res)
              if (res.message === 'OK') {
                this.$message.success('添加教室成功')
                this.getData()
              } else this.$message.error('添加教室失败')
            }).catch((e) => {
              this.editFormVisible = false
              this.$message.error('添加教室失败')
            })
          } else {
            // 编辑操作
            this.editForm.rStatus = this.editForm.rStatus === '可用' ? 1 : 0
            // console.log(this.editForm)
            updateRoomInfo(this.editForm).then(res => {
              this.editFormVisible = false
              this.getData()
            })
          }
          this.loading = false
        } else {
          return false
        }
      })
    },

    // 批量上传至服务器
    submitUpload () {
      this.$refs.upload.submit()
    },

    // 上传成功钩子,接收返回的后端数据
    handleSuccess (res) {
      // console.log(res)
      if (res.message === 'err') this.$message.error('您上传的文件有误！请重新上传，仅支持.xlsx/.xls文件')
      else {
        this.$message.success('文件上传至服务器成功！')
        // 重新获取数据并渲染
        this.getData()
      }
    },
    // 关闭编辑、添加弹出框
    closeDialog () {
      this.editFormVisible = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.user-search
  margin-top: 10px
.userRole
  width: 100%
.el-input
  width: 100%
.el-table, .el-table__expanded-cell
  opacity : 0.8
.el-button
   height : 33px !important
   margin-left : 10px
.upload-demo
  display: inline-block
  margin-left : 10px
</style>
